<template>
  <div class="auth-container">
    <div class="auth-form">
      <h2>登录</h2>
      <div class="form-group">
        <label for="role">选择身份</label>
        <select v-model="data.role" id="role">
          <option value="student">学生</option>
          <option value="teacher">教师</option>
          <option value="developer">开发者</option>
        </select>
      </div>
      <div class="form-group">
        <label for="username">账号</label>
        <input type="text" v-model="data.username" id="username" placeholder="账号" />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" v-model="data.password" id="password" placeholder="密码" />
      </div>
      <button @click="login">登录</button>
      <button @click="goToRegister">注册</button>
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const data = reactive({
      role: 'student',
      username: '',
      password: '',
    });

    const router = useRouter();

    const login = () => {
      console.log('Login data:', data);
      fetch('http://localhost:8080/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('网络响应不正常：' + response.status);
        }
        return response.json();
      })
      .then(res => {
        console.log('Response:', res); // 调试输出响应结果
        if (res.code == '200') {
          // 登录成功
          
          console.log('跳转到 /home'); // 调试信息
          router.push('/management/Home');
          ElMessage.success('登录成功');
          //存储后台返回的用户登录信息
          localStorage.setItem('xm-pro-user',JSON.stringify(res.data)) //把json对象转换成json字符串存储
        } else {
          // 登录失败，显示错误信息
          ElMessage.error(res.msg);
        }
      })
      .catch(error => {
        // 网络或其他错误
        ElMessage.error('登录失败，请检查网络或联系管理员');
        console.error('登录请求失败:', error);
      });
    };

    const goToRegister = () => {
      router.push('/register');
    };

    return {
      data,
      login,
      goToRegister,
    };
  },
};
</script>
<style scoped>
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url('../assets/e4acaeba32582a57c0bb1c518142915.jpg');
  background-size: cover;
  background-position: center;
}

.auth-form {
  display: flex;
  flex-direction: column;
  width: 300px;
  padding: 20px;
  border-radius: 10px;
  background: #282c34;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #ffffff;
  font-weight: bold;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #3e4452;
  border-radius: 5px;
  background: #3e4452;
  color: #ffffff;
  font-size: 14px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background: #61dafb;
  color: #282c34;
  border: none;
  border-radius: 5px;
  margin: 5px 0;
  transition: background 0.3s;
}

button:hover {
  background: #4a90e2;
}
</style>